<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 的生命周期</title>
</head>
<body>
<div id="app">
    <h2>世界， 你好！</h2>
    <h2>{{ message }}</h2>

    <button v-on:click="message='Hi, World!'">更改数据</button>
</div>
<script src="../../../../js/vue.global.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: "Hello, World!",
            }
        },

        // template:"<h1>世界， 你好！</h1>",
        beforeCreate() {
            console.group("beforeCreate() 调用时的状态")
            console.log("%c%s", "color:red", this.$el)      // 该组件实例管理的 DOM 根节点。   vue 挂载点
            console.log("%c%s", "color:red", this.$data)      // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:red", this.message)
            console.groupEnd()
        },

        created() {
            console.group("created() 调用时的状态")
            console.log("%c%s", "color:green", this.$el)      // 该组件实例管理的 DOM 根节点。   vue 挂载点
            console.log("%c%s", "color:green", this.$data)      // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:green", this.message)
            console.groupEnd()
        },

        beforeMount() {
            console.group("beforeMount() 调用时的状态")
            console.log("%c%s", "color:blue", this.$el)      // 该组件实例管理的 DOM 根节点。   vue 挂载点
            console.log("%c%s", "color:blue", this.$data)      // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:blue", this.message)
            console.groupEnd()
        },

        mounted() {
            console.group("mounted() 调用时的状态")
            console.log("%c%s", "color:yellow", this.$el)      // 该组件实例管理的 DOM 根节点。   vue 挂载点
            console.log("%c%s", "color:yellow", this.$data)      // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:yellow", this.message)
            console.groupEnd()
        },

        beforeUpdate() {
            console.group("beforeUpdate() 调用时的状态")
            console.log("%c%s", "color:red", this.$el)      // 该组件实例管理的 DOM 根节点。   vue 挂载点
            console.log("%c%s", "color:red", this.$data)      // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:red", this.message)
            console.groupEnd()
        },

        updated() {
            console.group("updated() 调用时的状态")
            console.log("%c%s", "color:red", this.$el)      // 该组件实例管理的 DOM 根节点。   vue 挂载点
            console.log("%c%s", "color:red", this.$data)      // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:red", this.message)
            console.groupEnd()
        },

        
    })

    app.mount("#app")
</script>
</body>
</html>